<template>
    <div>
        <div class="item">
            <div>
                <div class="title">账户密码</div>
                <div v-if="form.passStrength" class="desc">
                    当前密码强度：
                    <span v-if="form.passStrength == '弱'" class="red">{{ form.passStrength }}</span>
                    <span v-if="form.passStrength == '中'" class="middle">{{ form.passStrength }}</span>
                    <span v-if="form.passStrength == '强'" class="green">{{ form.passStrength }}</span>
                </div>
            </div>
            <div>
                <a @click="showChangePass = true">修改</a>
            </div>
        </div>
        <div class="item">
            <div>
                <div class="title">绑定手机</div>
                <div class="desc">
                    <span v-if="form.mobile">已绑定手机：{{ form.mobile }}</span>
                    <span v-else>未绑定手机号</span>
                </div>
            </div>
            <div>
                <a @click="showChangeMobile">修改</a>
                <!--        <a>暂不支持设置</a>-->
            </div>
        </div>
        <!--    <div class="item">-->
        <!--      <div>-->
        <!--        <div class="title">绑定邮箱</div>-->
        <!--        <div class="desc">-->
        <!--          <span v-if="form.email">已绑定邮箱：{{ form.email }}</span>-->
        <!--          <span v-else>未绑定邮箱</span>-->
        <!--        </div>-->
        <!--      </div>-->
        <!--      <div>-->
        <!--&lt;!&ndash;        <a @click="showChangeEmail">修改</a>&ndash;&gt;-->
        <!--        <a>暂不支持设置</a>-->
        <!--      </div>-->
        <!--    </div>-->
        <div class="item">
            <div>
                <div class="title">密保问题</div>
                <div class="desc">未设置密保问题，密保问题可有效保护账户安全</div>
            </div>
            <div>
                <a>暂不支持设置</a>
            </div>
        </div>

        <Modal title="修改手机号" v-model="editMobileVisible" :closable="false" :mask-closable="false" :width="500">
            <Form ref="mobileEditForm" :model="mobileEditForm" :label-width="70" :rules="mobileEditValidate">
                <FormItem label="手机号" prop="mobile">
                    <Input v-model="mobileEditForm.mobile" @on-change="hasChangePhone" placeholder="请输入新手机号" />
                </FormItem>
                <FormItem label="验证码" prop="code" :error="codeError">
                    <Row type="flex" justify="space-between">
                        <Input v-model="mobileEditForm.code" placeholder="请输入您收到的短信验证码" style="width: 280px" />
                        <CountDownButton ref="countDownMobile" @on-click="sendEditMobileCode" :disabled="canSendMobileCode" :autoCountDown="false" :loading="sending" :text="getSms" />
                    </Row>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelInputCodeBox">取消</Button>
                <Button type="primary" :loading="checkCodeLoading" @click="submitEditMobile">提交</Button>
            </div>
        </Modal>

        <Modal title="修改邮箱" v-model="editEmailVisible" :closable="false" :mask-closable="false" :width="500">
            <Form ref="emailEditForm" :model="emailEditForm" :label-width="100" :rules="emailEditValidate">
                <FormItem label="新邮箱地址" prop="email">
                    <Input v-model="emailEditForm.email" @on-change="hasChangeEmail" placeholder="请输入新邮箱地址"></Input>
                </FormItem>
                <FormItem label="验证码" prop="code" :error="codeError">
                    <Row type="flex" justify="space-between">
                        <Input v-model="emailEditForm.code" placeholder="请输入您收到的邮件中的验证码" style="width: 250px" />
                        <CountDownButton ref="countDownEmail" @on-click="sendVerifyEmail" :disabled="canSendEditEmail" :autoCountDown="false" :loading="sending" :text="getSms" />
                    </Row>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelEditEmail">取消</Button>
                <Button type="primary" :loading="editEmailLoading" @click="submitEditEmail">提交</Button>
            </div>
        </Modal>

        <!-- 修改密码 -->
        <changePass v-model="showChangePass" />
        <!-- 验证密码 -->
        <check-password ref="checkPassMobile" placeholder="请输入您的密码" @on-success="checkSuccessMobile" />
        <!-- 验证密码 -->
        <check-password ref="checkPassEmail" @on-success="checkSuccessEmail" />
    </div>
</template>

<script>
import { sendEditEmail, editEmail, sendEditMobileSms, changeMobile } from '@/api/index';
import { validateMobile } from '@/libs/validate';
import CountDownButton from '@/views/my-components/xboot/count-down-button';
import checkPassword from '@/views/my-components/xboot/check-password';
import changePass from '@/views/change-pass/change-pass';
import Cookies from 'js-cookie';
export default {
    components: {
        changePass,
        checkPassword,
        CountDownButton
    },
    name: 'security',
    data() {
        return {
            showChangePass: false,
            form: {},
            mobileEditForm: {
                mobile: '',
                code: ''
            },
            emailEditForm: {
                email: '',
                code: ''
            },
            codeError: '',
            initPhone: '',
            initEmail: '',
            saveLoading: false,
            sending: false,
            getSms: '获取验证码',
            canSendMobileCode: false, // 是否可点获取验证码
            checkCodeLoading: false,
            checkPassLoading: false,
            editEmailLoading: false,
            mobileEditValidate: {
                mobile: [{ required: true, message: '请输入手机号码' }, { validator: validateMobile }]
            },
            emailEditValidate: {
                email: [
                    { required: true, message: '请输入邮箱地址' },
                    { type: 'email', message: '邮箱格式不正确' }
                ]
            },
            editMobileVisible: false, // 显示填写验证码box
            editEmailVisible: false,
            canSendEditEmail: true
        };
    },
    methods: {
        init() {
            let v = JSON.parse(Cookies.get('userInfo'));
            // 转换null为""
            for (let attr in v) {
                if (v[attr] == null) {
                    v[attr] = '';
                }
            }
            let str = JSON.stringify(v);
            let userInfo = JSON.parse(str);
            this.form = userInfo;
            this.initPhone = userInfo.mobile;
            this.mobileEditForm.mobile = userInfo.mobile;
            this.initEmail = userInfo.email;
            this.emailEditForm.email = userInfo.email;
        },
        showChangeMobile() {
            this.editMobileVisible = true;
            // this.$refs.checkPassMobile.show();
        },
        checkSuccessMobile() {
            this.editMobileVisible = true;
        },
        showChangeEmail() {
            this.$refs.checkPassEmail.show();
        },
        checkSuccessEmail() {
            this.editEmailVisible = true;
        },
        cancelInputCodeBox() {
            this.editMobileVisible = false;
            this.form.mobile = this.initPhone;
        },
        cancelEditEmail() {
            this.editEmailVisible = false;
            this.emailEditForm.email = this.initEmail;
        },
        sendEditMobileCode() {
            this.$refs['mobileEditForm'].validate(valid => {
                if (valid) {
                    this.getSms = '发送中';
                    this.sending = true;
                    sendEditMobileSms(this.mobileEditForm.mobile).then(res => {
                        this.getSms = '获取验证码';
                        this.sending = false;
                        if (res.success) {
                            this.$Message.success('发送短信验证码成功');
                            // 开始倒计时
                            this.$refs.countDownMobile.startCountDown();
                        }
                    });
                }
            });
        },
        submitEditMobile() {
            this.$refs['mobileEditForm'].validate(valid => {
                if (valid) {
                    if (!this.mobileEditForm.code) {
                        this.codeError = '请填写短信验证码';
                        return;
                    } else {
                        this.codeError = '';
                    }
                    this.checkCodeLoading = true;
                    changeMobile(this.mobileEditForm).then(res => {
                        this.checkCodeLoading = false;
                        if (res.success) {
                            this.$Message.success('修改成功');
                            this.form.mobile = this.mobileEditForm.mobile;
                            this.initPhone = this.mobileEditForm.mobile;
                            this.editMobileVisible = false;
                            this.$emit('on-success', true);
                        }
                    });
                }
            });
        },
        hasChangePhone() {
            if (this.mobileEditForm.mobile == this.initPhone) {
                this.canSendMobileCode = true;
            } else {
                this.$refs['mobileEditForm'].validate(valid => {
                    if (valid) {
                        this.canSendMobileCode = false;
                    } else {
                        this.canSendMobileCode = true;
                    }
                });
            }
        },
        hasChangeEmail() {
            if (this.emailEditForm.email == this.initEmail) {
                this.canSendEditEmail = true;
            } else {
                this.canSendEditEmail = false;
            }
        },
        sendVerifyEmail() {
            this.$refs['emailEditForm'].validate(valid => {
                if (valid) {
                    this.getSms = '发送中';
                    this.sending = true;
                    sendEditEmail(this.emailEditForm.email).then(res => {
                        this.getSms = '获取验证码';
                        this.sending = false;
                        if (res.success) {
                            this.$Message.success('发送邮件验证码成功，请注意查收');
                            // 开始倒计时
                            this.$refs.countDownEmail.startCountDown();
                        }
                    });
                }
            });
        },
        submitEditEmail() {
            this.$refs['emailEditForm'].validate(valid => {
                if (valid) {
                    if (!this.emailEditForm.code) {
                        this.codeError = '验证码不能为空';
                        return;
                    } else {
                        this.codeError = '';
                    }
                    this.editEmailLoading = true;
                    editEmail(this.emailEditForm).then(res => {
                        this.editEmailLoading = false;
                        if (res.success) {
                            this.initEmail = this.emailEditForm.email;
                            this.form.email = this.emailEditForm.email;
                            this.$Message.success('修改邮件成功');
                            this.editEmailVisible = false;
                            this.$emit('on-success', true);
                        }
                    });
                }
            });
        }
    },
    mounted() {
        this.init();
    }
};
</script>
